---
title: hexo next 美化
date: 2021-09-20 17:20:15
tags:
---
本文介绍了在 Next 主题的基础上进一步对博客进行美化的方案，主要包括:
- 在文章末尾添加结束标记
- 修改侧边栏的位置到左边
- 添加不同类型的动态背景效果
- 添加 live2d 看板娘
- 为布局元素添加边缘弹性摆动效果
- 个性化回到顶部按钮
- 添加不同类型的鼠标点击特效
- 评论区输入打字礼花特效
读者可以根据需要选择其中喜欢的方案应用到站点博客中。
# 修改博客字体
在 [Google Fonts](https://www.google.com/fonts) 上找到心仪的字体，然后在主题配置文件中为不同的应用场景配置字体：
```
themes\next\_config.yml
font:
enable: true
# 外链字体库地址，例如 //fonts.googleapis.com (默认值)
host:
# 全局字体，应用在 body 元素上
global:
external: true
family: Monda
# 标题字体 (h1, h2, h3, h4, h5, h6)
headings:
external: true
family: Roboto Slab
# 文章字体
posts:
external: true
family:
# Logo 字体
logo:
external: true
family:
# 代码字体，应用于 code 以及代码块
codes:
external: true
family:
```
# 文章页末美化
## 为标签添加图标
默认情况下标签前缀是 `#` 字符，用户可以通过修改主题源码将标签的字符前缀改为图标前缀，更改后效果如下：
[](http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181113045027074.png)
[标签图标前缀](http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181113045027074.png)
在文章布局模板中找到文末标签相关代码段，将 `#` 换成 `` 即可：
```
themes\next\layout\_macro\post.swig
```
Next 中使用 [FontAwesome](https://fontawesome.com/v4.7.0/icons/) 作为图标库，用户可以在 FontAwesome 上找到心仪的图标来替换标签的字符前缀。
## 添加结束标记
本章节参考 [asdfv1929 | Hexo NexT 主题内给每篇文章后添加结束标语](https://asdfv1929.github.io/2018/01/28/add-the-end/)
在文末添加结束标记，效果如下：
[](http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181113045252399.png)
[文末结束标记](http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181113045252399.png)
新建布局模板文件 post-end-tag.swig，添加如下代码：
```
themes\next\layout\_macro\post-end-tag.swig
{% if not is_index %}
-------- 本文结束
感谢阅读 --------
{% endif %}
+ {% include 'post-end-tag.swig' %}
+
+ {% endif %}
{% if theme.wechat_subscriber.enabled and not is_index %}
{% include 'wechat-subscriber.swig' %}
{% endif %}
```
在站点配置文件末尾添加如下代码：
```
_config.yml
post_end_tag:
enabled: true # 是否开启文末的本文结束标记
icon: paw # 结束标记之间的图标
```
重启服务器后即可在文末看到结束标记。
# 页面加载进度条
当网络不好的时候可能会在打开站点或跳转文章时出现短暂的白屏，此时如果能有加载进度提示将会提高用户操作体验。
在根目录下执行以下命令安装相关依赖：
```
$ git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace
```
在主题配置文件中设置 `pace: true`。
默认提供了多种主题的进度条加载样式，有顶部提示的，有中间提示的，还有全页面遮挡提示的，个人认为默认的进度条效果就恰如其当，既能够在页面空白的时候起到加载作用，也不会因为太过花里胡哨而喧宾夺主，尤其是当你如果使用了不蒜子的站点访问统计的功能的时候，常常会遇到所有资源都加载完毕而不蒜子还在等待响应，如果这个时候在页面较显眼的位置出现一个停滞不前的进度条，很让人抓狂。
# 侧边栏放左边
受 [猪猪侠的博客](https://www.ofind.cn/) 所启发，萌生了想把主题侧边栏放在左侧的想法。
Next 主题各系列中只有 Pisces 和 Gemini 支持通过主题配置文件来将侧边栏置于左侧或右侧，而 Muse 和 Mist 则需要深度修改源码才能实现改变侧边栏位置。
在自定义样式文件中添加如下规则：
```
themes\next\source\css\_custom\custom.styl
.sidebar-toggle {
left: 30px;
}
.sidebar {
left: 0px;
}
```
修改动效脚本代码：
```
themes\next\source\js\src\motion.js
$(document)
.on('sidebar.isShowing', function() {
NexT.utils.isDesktop() && $('body').velocity('stop').velocity(
- {paddingRight: SIDEBAR_WIDTH},
+ {paddingLeft: SIDEBAR_WIDTH},
SIDEBAR_DISPLAY_DURATION
);
})
.on('sidebar.isHiding', function() {
});
...
hideSidebar: function() {
- NexT.utils.isDesktop() && $('body').velocity('stop').velocity({paddingRight: 0});
+ NexT.utils.isDesktop() && $('body').velocity('stop').velocity({paddingLeft: 0});
this.sidebarEl.find('.motion-element').velocity('stop').css('display', 'none');
this.sidebarEl.velocity('stop').velocity({width: 0}, {display: 'none'});
sidebarToggleLines.init();
...
}
```
如此以来就可以将侧边栏放置在左边了，但当窗口宽度缩小到 991px 之后会出现样式错误：侧边栏收缩消失但是页面左侧仍留有空白间距，此时修改如下代码即可：
```
themes\next\source\css\_common\scaffolding\base.stylbody { position: relative; // Required by scrollspy font-family: $font-family-base; font-size: $font-size-base; line-height: $line-height-base; color: $text-color; background: $body-bg-color;- +mobile() { padding-left: 0 !important; }- +tablet() { padding-left: 0 !important; } + +mobile() { padding-right: 0 !important; }+ +tablet() { padding-right: 0 !important; } +desktop-large() { font-size: $font-size-large; }}
```
# 添加动态背景
Next 主题可以通过安装插件快速为站点添加不同效果的动态背景。
## 粒子漂浮聚合
应用效果如下图：
[](http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181115092103046.png)
[canvas-nest 动态背景](http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181115092103046.png)
该功能由 [theme-next-canvas-nest](https://github.com/theme-next/theme-next-canvas-nest) 插件提供，在根目录下执行如下命令：
```
$ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest
```
然后在主题配置文件中设置 `canvas_nest: true` 即可。
Next v6.5.0 及以上版本支持更多的自定义选项：
```
themes\next\_config.ymlcanvas_nest: enable: true onmobile: true # 是否在移动端显示 color: '0,0,255' # 动态背景中线条的 RGB 颜色 opacity: 0.5 # 动态背景中线条透明度 zIndex: -1 # 动态背景的 z-index 属性值 count: 99 # 动态背景中线条数量
```
## Three 三维动效
[theme-next-three](https://github.com/theme-next/theme-next-three) 插件提供了三个类型的背景动效，应用效果如下：
- [three-waves](http://yearito.cn/posts/hexo-theme-beautify.html#three-三维动效-1)
- [canvas-lines](http://yearito.cn/posts/hexo-theme-beautify.html#three-三维动效-2)
- [canvas-sphere](http://yearito.cn/posts/hexo-theme-beautify.html#three-三维动效-3)
[](http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181115091950761.png)
在根目录下执行如下命令安装相关依赖：
```
$ git clone https://github.com/theme-next/theme-next-three themes/next/source/lib/three
```
然后在主题配置文件中设置开启对应的动效选项即可。
```
themes\next\_config.yml# JavaScript 3D library.# Dependencies: https://github.com/theme-next/theme-next-three# three_wavesthree_waves: true# canvas_linescanvas_lines: false# canvas_spherecanvas_sphere: false
```
个人认为在站点中添加动态背景并没有实际的意义，只会凭空增加页面内存占用及 CPU 消耗，所以本站没有添加任何动态背景。
## 随机三角丝带
[](http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/evan-you.png)
[随机三角丝带](http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/evan-you.png)
该功能由 Vue 作者 [尤雨溪](http://evanyou.me/) 首创。本章节中核心代码来源于 [DIYgod](https://diygod.me/) 编写的 [sagiri](https://github.com/DIYgod/hexo-theme-sagiri) 主题。
点击下方按钮下载相应的脚本，并置于 themes\next\source\js\ 目录下：
[随机三角丝带](https://script-1256884783.file.myqcloud.com/evan-you.js)
在主题自定义布局文件中添加以下代码：
```
themes\next\layout\_custom\custom.swig{# 随机三角丝带背景 #}{% if theme.evanyou %} {% endif %}
```
如果 custom.swig 文件不存在，需要手动新建并在布局页面中 body 末尾引入：
```
themes\next\layout\_layout.swig ... {% include '_third-party/exturl.swig' %} {% include '_third-party/bookmark.swig' %} {% include '_third-party/copy-code.swig' %}+ {% include '_custom/custom.swig' %}